import { useEffect, useState } from 'react'
import { useRouter } from 'next/router';
import AppLayout from '../../components/app-layout'
import marked from "marked";
import hljs from 'highlight.js'
import MarkNav from 'markdown-navbar'


import config from '../../config/markdown.conf'
import { CopyCode } from '../../utils'

import style from '../../styles/detail.module.scss'


import Axios from '../../services/request'

import {formatDatetime} from '../../utils';


hljs.configure(config.hljs)
marked.setOptions({
    highlight: (code) => hljs.highlightAuto(code).value,
    ...config.options
})

export default function detail() {
    const router = useRouter();
    const [show, setShow] = useState(false)
    const [modal, setModal] = useState({})
    const [condata, setCondata] = useState({
        content: '',
        title: '',
        create_time: '',
        introduce: '',
        update_time: ''
    })
    // const [markdown, setMarkdown] = useState('')
    const { id } = router.query;

    const previewImgEvent = () => {
        const detail = document.getElementById('detail-content')
        const images = detail.getElementsByTagName('img')
        for (let i = 0; i < images.length; i++) {
            let img = images[i]
            img.style.cursor = 'pointer'
            img.addEventListener('click', previewImg, false)
        }
    }
    const closeModal = () => {
        setShow(false)
        setModal({})
    }
    const previewImg = (e) => {
        setShow(true)
        setModal({ url: e.target.getAttribute('src') })
    }
    const getState = () => {

        let url = `/api/moment/${id}`
        Axios.get(url).then(res => {
            setCondata(res.data)
            previewImgEvent()
            CopyCode()
        })
    }
    useEffect(() => {
        if (id) {
            getState()
        }

    }, [id])

    return (
        <AppLayout>
            {/* <div className="header_box"></div> */}
            <div className={style.content}>
                <div className="aside">
                    <MarkNav
                        className="article-menu"
                        source={condata.content}
                        headingTopOffset={50}
                    />
                </div>
                <div className={style.right}>
                    <div className={style.con_header}>
                        <div className={style.con_header_back}>
                            <div className={style.header_center}>
                                <h1>{condata && condata.title}</h1>
                                <p>{condata && condata.introduce}</p>
                                <span>{condata && formatDatetime(condata.create_time,'yyyy年MM月dd日 hh:mm:ss')}</span>
                            </div>

                        </div>

                    </div>
                    <div className={style.mkd_content}>
                        <div className="container">
                            <div id="detail-content" dangerouslySetInnerHTML={{ __html: marked(condata.content) }}></div>

                        </div>
                    </div>

                </div>

            </div>

        </AppLayout>
    )
}
